ajax 请求时，浏览器要求当前网页和 server 必须同源  (同源：协议、域名、端口，三者必须一致)  
（安全,不然恶意代码将随意把你的信息传送到外部）


:::tip
所有的跨域，都必须经过 server 端允许和配合
末经 server 端允许就实现跨域，说明浏览器有漏洞，危险信号
:::


## 解决方案一 JSONP
原理： 是利用js文件无跨域限制

服务器可以任意动态拼接数据返回

```js
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};
```

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。
``` js
foo({
  "ip": "8.8.8.8"
});
```
优点：兼容性好，在一些老的浏览器中也可以运行。  
缺点：只能进行get请求。

## 解决方案二 CORS
W3C标准，是跨源AJAX请求的根本解决方法，不限制方法
```js
response. setHeader ("Access-Control-Allow-Origin", "http://localhost:8011") ;
response. setHeader("Access-Control-Allow-Headers""X-Requested-With");
response. setHeader ("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS") ;
// 接收跨域的cookie
response. setHeader("Access-Control-Allow-Credentials""true"):

```

### 参考
[浏览器同源政策及其规避方法](https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html)